{extend name="public/layer/main" /}
{block name="css"}{/block}
{block name="style"}{/block}
{block name="js"}
<script src="__PUBLIC__/admin/assets/js/echarts.js"></script>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function () {
        //收益图表
        showShouYi();
        //实际收益图表
        showRealShouYi();
    });

    /**
     * 收益图表
     */
    function showShouYi() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '积分营业额'],
                source: [
                    {product: '月收益', '积分营业额': {$data.turnovers.pmonth ?? 0}},
                    {product: '年收益', '积分营业额': {$data.turnovers.pyear ?? 0}},
                    {product: '总收益', '积分营业额': {$data.turnovers.pzong ?? 0}},
                ]
                },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function(params) {
                                        let colorList = [
                                            "#91c7ae",
                                            "#91c7ae",
                                            "#91c7ae",
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                                },
                                //鼠标悬停时：
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: '#91c7E0'
                                }
                            },
                            barWidth : 80,
                        },
                    ]
                };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    /**
     * 实收收益图表
     */
    function showRealShouYi() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container2'));

        // 指定图表的配置项和数据
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '现金营业额'],
                source: [
                    {product: '月收益', '现金营业额': {$data.bank.pmonth ?? 0}},
                    {product: '年收益', '现金营业额': {$data.bank.pyear ?? 0}},
                    {product: '总收益', '现金营业额': {$data.bank.pzong ?? 0}}
                ]
                },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        //每根柱子颜色设置
                        color: function(params) {
                            let colorList = [
                                "#37A2DA",
                                "#37A2DA",
                                "#37A2DA",
                            ];
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: '#37A2DD'
                    }
                },
                barWidth : 80,
            },
        ]
                };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
{/block}
{block name="module"}{$globals.module}{/block}
{block name="controller"}{$globals.action}{/block}
{block name="action"}{$globals.action}{/block}
{block name="desc"}{$globals.desc}{/block}
{block name="content"}
    <div class="row">
        <div class="col-sm-3">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>{$data.sellers}</h3>
                    <p>辖区商家</p>
                </div>
                <div class="icon">
                    <i class="ion ion ion-person-add"></i>
                </div>
                <a href="{:url('WkSeller/page')}" class="small-box-footer">点击查看 <i class="fa fa-arrow-circle-right"> </i></a>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>{$data.profit}</h3>
                    <p>日收益</p>
                </div>
                <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                </div>
                <a href="{:url('WkSeller/page')}" class="small-box-footer">点击查看 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>{$data.turnovers.pday} + {$data.bank.pday}</h3>
                    <p>日积分营业额 + 日现金营业额</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <a href="{:url('WkSeller/page')}" class="small-box-footer">点击查看 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>{:$data.turnovers.pday + $data.bank.pday}</h3>
                    <p>日总营业额</p>
                </div>
                <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                </div>
                <a href="{:url('WkSeller/page')}" class="small-box-footer">点击查看 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">积分营业额统计概述</h3>
                </div>
                <div class="box-body">
                    <div id="container" style="height:320px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">现金营业额统计概述</h3>
                </div>
                <div class="box-body">
                    <div id="container2" style="height:320px;"></div>
                </div>
            </div>
        </div>
    </div>
{/block}